<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>payment</title>
  <script type="text/javascript" src="js/getRequest.js"></script>
  <script type="text/javascript">
  var isIE8 = myBrowser();
  if (isIE8) {
    document.write("<link href='css/bootstrap-common.min.css' rel='stylesheet'>"); 
  } else {
    document.write("<link href='"+ onlineURL +"plugins/bootstrap/css/bootstrap.min.css?v=170418' rel='stylesheet' media='screen'>"); 
  }
  </script>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
  <![endif]-->
  <script type="text/javascript">
    document.write("<script src='"+ onlineURL +"plugins/jquery.min.js?v=170418'><\/script>"); 
  </script>
  <script type="text/javascript">
    document.write("<script src='"+ onlineURL +"plugins/echarts/echarts.min.js?v=170418'><\/script>"); 
  </script>
</head>

<body>
<div class="container-fluid">
  <h3>交费情况</h3>
  <div id="payment" class="content">
    <div class="top row">
      <div class="inline-item col-lg-4 col-md-4 col-sm-4">
        <div class="item-parent text-center">
          <div class="item-child">
            <p><span class="text-mute">应收学费</span></p>
            <p><span id="total_sum" class="text-number"></span><span class="mute"> 元</span></p>
          </div>
        </div>
      </div>
      <div class="inline-item col-lg-4 col-md-4 col-sm-4">
        <div class="item-parent text-center">
          <div class="item-child">
            <p><span class="text-mute">已收学费</span></p>
            <p><span id="pay_sum" class="text-number"></span><span class="mute"> 元</span></p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="middle">
      <h4>数据分析</h4>
      <div id="brokenLine"></div>
    </div>

    <div class="bottom">
      <h4>数据统计</h4>
      <div id="table">
        表格
      </div>
    </div>    
  </div>
</div>

<script id="myTable" type="text/html">
<table class="table table-bordered table-condensed text-center">
  <tbody>
    <tr class="text-center">
      <th class="text-center">函授站</th>
      <th class="text-center">应收学费</th>
      <th class="text-center">已收学费</th>
    </tr>
    {{each pageMaplist as value i}}
    <tr class="text-center">
      <td class="text-center">{{value.stationame}}</td>
      <td class="text-center">{{value.totalfee}}</td>
      <td class="text-center">{{value.paysum}}</td>
    </tr>
    {{/each}}
    </tbody>
  </table>
</script>

<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript">
$(function() {

  var tableHtml = '',
      parameters = getParameters(),
      thisUrl = getSite(),
      itemSystem = {itemSystemIds:'2c9091fd58f2c3930158f2c3977c000c;2c9091fd58f2c3930158f2c3977e000e'},
      WithoutitemSystem = WithoutitemSystemIds(),
      sumData = Object.assign(itemSystem,WithoutitemSystem);

  $.ajax({
    type: 'GET',
    url: thisUrl,
    data: parameters,
    dataType: 'json',
    success: function(data) {
      var myData = data['pageMaplist'];
      // artTemplate 渲染表格
      getTable(data);
      $('tr th').css('width','30%');
      // 得到折线图
      getBrokenLine(myData);
    },
    error: function(data) {
    	  document.write(data.responseText);
     }
  })

  // 缴费情况
  $.ajax({
    type: 'GET',
    url: thisUrl,
    data: sumData,
    dataType: 'json',
    success: function(data) {
      var myData = data['pageMaplist'][0];
      $('#total_sum').html(myData.totalfee);
      $('#pay_sum').html(myData.paysum);
    }
  })
})


function getTable(data) {
  var tableHtml = template('myTable', data);
  $('#table').html(tableHtml);
}

function getBrokenLine(myData) {
  var myChart = echarts.init(document.getElementById('brokenLine'));

  var legendArr = ['应收学费', '已收学费'],
      StationNameArr = [],
      paysumArr = [],
      totalfeeArr = [];

  myData.forEach(function(ele) {
    StationNameArr.push(ele.stationame);
    paysumArr.push(ele.paysum);
    totalfeeArr.push(ele.totalfee);
  });

  var option = {
    color: ['#1381BD','#C0504D'],
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:legendArr
    },
   
    xAxis:  {
        type: 'category',
        boundaryGap: true,
        data: StationNameArr,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#CCCCCC'
            }
        },
        axisTick: {
            show: false,
            alignWithLabel: true
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            formatter: '{value}'
        },
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: '#CCCCCC'
            }
        },
        splitLine: {
            show: true
        }
    },
    series: [
        {
            name:'应收学费',
            type:'line',
            data:totalfeeArr,
            symbol: 'rect'
        },
        {
            name:'已收学费',
            type:'line',
            data:paysumArr,
            symbol: 'arrow'
        }
    ]
  };
  myChart.setOption(option);

  addEvent(myChart, 'resize', function() {
    myChart.resize();
  });
}

</script>
</body>
</html>

